<template>
    <div>
        <div class="right-content">
            <div class="card-wrapper">
                <div class="loadMoreList">
                    <div class="training-item">
                        <div style="display: flex">
                            <div class="cover">
                                <img
                                    :src="htItem.momentBackup.cover[0]"
                                    alt=""
                                />
                            </div>
                            <div>
                                <div class="title">
                                    {{ htItem.momentTitle }}
                                </div>
                                <div class="time">动态</div>
                                <div class="user">
                                    <img
                                        :src="
                                            htItem.momentBackup.creatorBackup
                                                .avatar
                                        "
                                        class="user-img"
                                    />
                                    <span class="userName">{{
                                        htItem.momentBackup.creatorBackup.name
                                    }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="status">
                            <span class="duration"
                                >{{ formatTime(htItem.createTime) }}
                            </span>
                            <div class="icon" v-if="statedelest==0">
                            <img
                                src="./icon/fill 1.png"
                                v-if="htItem.ischecked == true"
                                @click="checkA(htItem.id)"
                            />
                            <!-- 灰的 -->
                            <img
                                src="./icon/fill.png"
                                v-else
                                @click="checkA(htItem.id)"
                            />
                          </div>
                            <el-popconfirm
                                @confirm="confirmEvent(htItem.id)"
                                :title="`你确定要删除吗?`"
                            >
                                <template #reference>
                                    <el-button v-show="statedelest == 1">
                                        删除</el-button
                                    >
                                </template>
                            </el-popconfirm>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script></script>
<script setup lang="ts">
import type { HistoryItem } from "@/api/trainingRoom";
import { ref } from "vue";
import moment from "moment";

const props = defineProps<{
    htItem: HistoryItem;
    state: number;
    statedelest: number;
}>();
const emit = defineEmits<{
    (e: "deleteHistory", id: string): void;
    (e: "ischecked"): void;
    (e: "getitemId", itemId: string): void;
}>();

// 删除按钮的取消与确认---------------------
// 确认
const confirmEvent = (id: string) => {
    emit("deleteHistory", id);
};
const check = () => {
    emit("ischecked");
};
// 更改状态数据
const a = ref(true);
const b = ref(false);
const checkA = (id: string) => {
  props.htItem.ischecked=!props.htItem.ischecked
};

// 时间
const formatTime = (time: number) => {
    if (!time || time < 0) return "";
    const days = moment().diff(moment(time).startOf("day"), "days");
    if (days === 0) return moment(time).format("HH:mm");
    if (days === 1) return `昨天 ${moment(time).format("HH:mm")}`;
    return moment(time).format("YYYY-MM-DD HH:mm:ss");
};
</script>

<style lang="scss" scoped>
.right-lower {
    .right-content {
        width: 100%;
        float: left;
        overflow: hidden;
        background-color: #fff;
        // margin-bottom: 20px;
        // padding: 0 20px 0;
        border-radius: 4px;
        // min-height: 700px;

        .card-wrapper {
            margin-top: 20px;
            padding-bottom: 20px;

            .loadMoreList {
                display: flex;
                flex-wrap: wrap;
                justify-content: flex-start;
                margin-left: auto;
                margin-right: auto;
                -webkit-box-pack: start;

                .training-item {
                    cursor: pointer;
                    box-sizing: border-box;
                    padding-top: 20px;
                    padding-bottom: 20px;
                    width: 100%;
                    border-bottom: 1px solid #e3e3e3;
                    display: flex;
                    -webkit-box-pack: justify;
                    justify-content: space-between;
                    -webkit-box-align: center;
                    align-items: center;
                    padding: 20px;

                    .cover {
                        width: 169px;
                        height: 101px;
                        border-radius: 4px;
                        background-size: cover;
                        background-position: 50%;
                        margin-right: 20px;
                        background-color: #f93684;
                        img {
                            width: 100%;
                            height: 100%;
                        }
                    }

                }

                .title {
                    // font-weight: 700;
                    font-size: 16px;
                    color: #111;
                }

                .time {
                    margin-top: 14px;
                    font-size: 14px;
                    color: #7d8090;
                }
                .user {
                    // width: 150px;
                    display: flex;
                    height: 30px;
                    margin-top: 10px;

                    .user-img {
                        width: 30px;
                        height: 30px;
                        border-radius: 50%;
                    }
                    .userName {
                        margin-left: 5px;
                        line-height: 30px;
                        text-align: center;
                    }
                }
                .status {
                    text-align: center;
                    position: relative;
                    .duration {
                        width: 180px;
                        position: absolute;
                        top: 9px;
                        right: 70px;
                    }
                    .icon{
                      display: contents;
                      img {
                          width: 30px;
                          height: 30px;
                      }
                    }
                }
            }
        }
    }
}
</style>
